<template>
	<view class="page-wrap">
		<view class="type-tab-wrap">
			<view
				:class="['type-item', item.type == formType ? 'active-type-item' : '']"
				v-for="(item, index) in typesList"
				:key="index"
		
			>
				{{ item.name }}
			</view>
		</view>
		<view class="step-wrap">
			<u-steps :current="step">
				<u-steps-item title="基础信息" @click.native="step>0?step=0:''"></u-steps-item>
				<u-steps-item title="调查内容" @click.native="step>1?step=1:''"></u-steps-item>
				<u-steps-item title="现场示意图" @click.native="step>2?step=2:''"></u-steps-item>
			</u-steps>
		</view>
		<view class="container">
			<keep-alive>
				<biotope
					v-if="formType === 1"
					:step="step"
          :name='name'
					:houseInfoPageParams="houseInfo"
					@setStep="handleSetStep"
					@handleRefresh="handleHousepageRefresh"
				>
				</biotope>
				<industrial
					v-if="formType === 2"
					:step="step"
          :name='name'
					:houseInfoPageParams="houseInfo"
					@setStep="handleSetStep"
					@handleRefresh="handleHousepageRefresh"
				></industrial>
				<otherHouse
					v-if="formType === 3"
					:step="step"
          :name='name'
					:houseInfoPageParams="houseInfo"
					@setStep="handleSetStep"
					@handleRefresh="handleHousepageRefresh"
				></otherHouse>
			</keep-alive>
		</view>
	</view>
</template>
<script>
import biotope from './biotope.vue';
import industrial from './industrial.vue';
import otherHouse from './other.vue';
import { typesList } from '@/config/enumeration.js';
export default {
	components: {
		biotope,
		industrial,
		otherHouse
	},
	data() {
		return {
			// formType: 1,
			formType: 3,
			typesList,
			step: 0, //0,
      name:null,
			eventChannel: null,
			houseInfo: null,
		};
	},
	onLoad(option) {
		const eventChannel = this.getOpenerEventChannel();
		this.eventChannel = eventChannel;
		eventChannel.on('houseInfo', (data) => {
      console.log(data,'81')
			this.houseInfo = data;
			this.formType = data.type;
      this.name=data.cityName
		});
	},
	onUnload() {
		this.eventChannel.off('sendWellInfo');
	},
	methods: {
		typeTabClick({ type }) {
			this.formType = type;
		},
		handleSetStep(step) {
			this.step = step;
		},
		handleHousepageRefresh() {
			this.eventChannel.emit('refresh');
		},
	},
};
</script>
<style lang="scss" scoped>
.page-wrap {
	padding-bottom: 180rpx;
	background-color: #f3f6f9;
}

.container {
	width: calc(100% - 48rpx);
	margin: 0 24rpx 24rpx;
	background-color: #fff;
}

.type-tab-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	height: 103rpx;
	width: calc(100% - 48rpx);
	margin: 0 24rpx;
	padding: 0 24rpx;
	background-color: #fff;
}

.type-item {
	font-size: 36rpx;
	color: #000000e6;
}

.active-type-item {
	position: relative;
	height: 103rpx;
	line-height: 103rpx;
	font-weight: 500;
	color: #3576f2;

	&::after {
		display: block;
		position: absolute;
		bottom: 6rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		content: ' ';
		width: 40rpx;
		height: 6rpx;
		background: #3576f2;
		border-radius: 7rpx;
	}
}

.step-wrap {
	padding: 40rpx 0;
}
</style>
